<template>
  <basic-card
    :title="$t('menu.server_settings')"
    :iconClass="'el-icon-eleme'"
  >
    <el-form label-position="top" label-width="120px" :model="formData" :rules="formRules" v-loading="loading" style="margin-top: 30px;">
      <el-row :gutter="60" style="width: 720px; margin-left: auto; margin-right: auto;">
        <el-col :span="12">
          <el-form-item :label="$t('broadcast.ip_address')" prop="ip_address">
            <basic-input v-model="formData.ip_address"></basic-input>
          </el-form-item>
          <el-form-item :label="$t('broadcast.send_port')" prop="send_port">
            <basic-input v-model="formData.send_port"></basic-input>
          </el-form-item>
          <el-form-item :label="$t('broadcast.send_person')" prop="send_person">
            <basic-input v-model="formData.send_person"></basic-input>
          </el-form-item>
          <el-form-item :label="$t('broadcast.password')" prop="password">
            <basic-input v-model="formData.password"></basic-input>
          </el-form-item>
          <el-form-item :label="$t('broadcast.audio_path')" prop="audio_path">
            <basic-input v-model="formData.audio_path"></basic-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <template #label><div style="height: 32px"></div></template>
            <el-button type="primary" :disabled="loading" style="margin-right: 15px; padding: 9px 3px;">{{ $t("broadcast.connect_test") }}</el-button>
            <el-badge is-dot class="item">{{ $t("broadcast.normal") }}</el-badge>
          </el-form-item>
          <el-form-item>
            <template #label><div style="height: 32px"></div></template>
            <el-button @click="close">{{ $t("botton.cancel") }}</el-button>
            <el-button type="primary" @click="submit" :disabled="loading">{{ $t("botton.save") }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </basic-card>
</template>
<script lang="ts">
import Vue from 'vue';
import BasicCard from "@/components/Basic/Card/BasicCard.vue";
import BasicInput from "@/components/Basic/Form/BasicInput.vue";

export default Vue.extend({
  components: { BasicCard, BasicInput },
  data() {
    return {
      formData: {
        ip_address: "",
        send_port: "",
        send_person: "",
        password: "",
        audio_path: "",
        connect_status: this.$config.BROADCAST_CONNECT_STATUS.normal
      },
      formRules: {
        ip_address: [{ required: true, message: this.$t("broadcast.ip_address_required_message"), trigger: 'blur' }],
        send_port: [{ required: true, message: this.$t("broadcast.send_port_required_message"), trigger: 'blur' }],
        send_person: [{ required: true, message: this.$t("broadcast.send_person_required_message"), trigger: 'blur' }],
        password: [{ required: true, message: this.$t("broadcast.password_required_message"), trigger: 'blur' }],
        audio_path: [{ required: true, message: this.$t("broadcast.audio_path_required_message"), trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getSetting();
  },
  methods: {
    getSetting() {
      // this.$mainApi.sysConfApi.getConfig(this.$config.SERVICE_CONFIG_ID.broadcast).then((res: any) => {
      //   this.formData.ip_address = res.data.ipAddress;
      //   this.formData.send_port = res.data.sendPort;
      //   this.formData.send_person = res.data.sendPerson;
      //   this.formData.password = res.data.password;
      //   this.formData.audio_path = res.data.remotePath;
      // });
    },
    saveSetting() {
      
    }
  }
})
</script>
<style lang="scss" scoped>

</style>
